<template>
	<div class="list-container">
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>我的收藏</template>
            <template #right><i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i></template>
        </TmallNavBar>

        <!-- 骨架屏 -->
        <van-skeleton v-if="isShowSkeleton">
            <template #template>
                <div class="skeleton-goods-list">
                    <div class="skeleton-goods-item" v-for="(item) in skeletonLength" :key="item" >
                        <div class="image-box" style="margin-bottom: 5px;">
                            <van-skeleton-image class="thumb" style="width: 100%;"/>
                        </div>
                        <div>
                            <van-skeleton-paragraph style="height: 30px;margin-bottom: 10px;"/>
                            <div class="skeleton-price-box">
                                <van-skeleton-paragraph row-width="40%"/>
                                <van-skeleton-paragraph row-width="40%"/>
                            </div>
                            <van-skeleton-paragraph row-width="40%" style="float: right;margin-top: 10px;"/>
                        </div>
                    </div>
                </div>
            </template>
        </van-skeleton>


        <!-- 商品数据 -->
        <van-pull-refresh 
            :style="domHeight > goodsListHeight ? 'height: calc(100vh - 0px);': ''"
            v-model="refreshing" 
            @refresh="onRefresh"
        >
            <van-list
                ref="goodsListRef"
                v-model:loading="loading"
                :finished="finished"
                :finished-text="queryParams.page_size < total ? '我也是有底线的~' : ''"
                @load="onLoadMore"
            >

                <div>
                    <!-- 商品数据 -->
                    <div class="goods-list" v-if="goodsCollectList.length > 0"
                        :style="queryParams.page_size >= total ? 'margin-bottom: 10px;' : ''"
                    >
                        <div 
                            @click="$router.push('/goodsDetail?goods_id='+item.goods_id)"
                            class="goods-item" 
                            v-for="item in goodsCollectList"
                            :key="item.goods_id"
                        >

                            <!-- 封面 -->
                            <img class="image" v-img-lazy="global.MINIO_FILE_DOMAIN + item.goods_cover_url" />

                            <!-- 商品名称 -->
                            <div class="name">{{ item.goods_name }}</div>

                            <!-- 价格 -->
                            <div class="price">
                                <span class="symbol">¥</span>
                                <span class="number">{{ (item.goods_price/100).toFixed(2) }}</span>
                            </div>

                            <!-- 取消收藏按钮 -->
                            <div style="float: right;">
                                <van-button style="width: 60px;" size="mini" @click.stop="cancel(item.id)">取消收藏</van-button>
                            </div>
                        </div>
                    </div>

                    <!-- 空数据 -->
                    <div class="blank" v-else>
                        <van-image :src="blankImage" class="image" />
                        <span class="text">您还没有收藏商品哟</span>
                        <van-button class="button" to="/">去首页看看</van-button>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>

        <!-- 返回顶部组件 -->
        <van-back-top right="5vw" bottom="5vh" />
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, inject, nextTick } from "vue"
import { reqUserGoodsCollectListAPI, reqCancelUserGoodsCollectAPI } from "@/apis/goodsCollect"
import blankImage from '@/assets/images/blank.png'
import { showConfirmDialog, showSuccessToast } from "vant"



// --------------------- 定义全局变量开始 ---------------------
// 全局属性
const global = inject('global')

const goodsListRef = ref()
const domHeight = ref('')
const goodsListHeight = ref(0)

nextTick(()=>{
    domHeight.value = document.documentElement.clientHeight;
})
// --------------------- 定义全局变量结束 ---------------------


// --------------------- 获取商品收藏列表功能开始 ---------------------
const skeletonLength = ref(20)

// 加载中
const loading = ref(false)

// 完成
const finished = ref(false)

// 定义商品收藏列表
const goodsCollectList = ref([])

// 商品数量
const total = ref(0)

// 请求参数
const queryParams = reactive({
	page: 1,
	page_size: 20
})

// 获取商品收藏列表
const getGoodsCollectList = async () => {
	if (finished.value == true) {
		return
	}

	loading.value = true

	// 请求数据
	const result = await reqUserGoodsCollectListAPI(queryParams)
	let goodsCollects = result.data.user_goods_collects != null ? result.data.user_goods_collects : []
	goodsCollectList.value.push(...goodsCollects)
    total.value = result.data.total
	if (queryParams.page < result.data.page_total) {
		queryParams.page++
	} else {
		finished.value = true
	}

	loading.value = false
    refreshing.value = false

    await nextTick(()=>{
        // console.log('goodsListHeight =', goodsListRef.value.$el.clientHeight);
        // console.log('domHeight =', domHeight.value);
        goodsListHeight.value = goodsListRef.value.$el.clientHeight
    })
}
// --------------------- 获取商品收藏列表功能结束 ---------------------





// 是否显示骨架屏
const isShowSkeleton = ref(false)

// 是否挂载
const isMounted = ref(false)

onMounted(() => {
    isMounted.value = true
})




// --------------------- 加载更多功能开始 ---------------------
const onLoadMore = async () => {
    // 当挂载时显示骨架屏
    if (isMounted.value) {
        isShowSkeleton.value = true
    }
	await getGoodsCollectList()
    isMounted.value = false
    isShowSkeleton.value = false
}
// --------------------- 加载更多功能结束 ---------------------





// ---------------------下拉刷新功能开始 ---------------------
const refreshing = ref(false)
const onRefresh = async () => {

    refreshing.value = true
    finished.value = false
    
    isShowSkeleton.value = true
	queryParams.page = 1
    goodsCollectList.value = []

    await getGoodsCollectList()
    isShowSkeleton.value = false
}
// ---------------------下拉刷新功能结束 ---------------------




// -------------------- 取消收藏功能开始 ---------------------
const cancel = async (id) => {
    showConfirmDialog({
        title:'提示',
        message:'确定要取消收藏吗?'
    }).then(async () => {
        await reqCancelUserGoodsCollectAPI(id)
        showSuccessToast('取消成功')

        const index = goodsCollectList.value.findIndex(item => item.id == id)
        goodsCollectList.value.splice(index, 1)
    }).catch(() => {})
}
// -------------------- 取消收藏功能结束 ---------------------
</script>


<style lang="scss" scoped>
// 骨架屏
.skeleton-goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-top: 47px;
    width: 100%;
    .skeleton-goods-item {
        width: 48%;
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
        background-color: #fff;
        .image {
            width: 154px;
            height: 154px;
        }
        .skeleton-price-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .name {
            height: 30px;
            font-size: 13px;
        
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
        }
        .price {
            margin-top: 8px;
            line-height: 1;
            color: #cf4444;
            font-size: 15px;
        }
        .symbol {
            font-size: 70%;
        }
        .decimal {
            font-size: 70%;
        }
    }
}
.list-container {
    display: flex;
    flex-direction: column;
    background-color: ghostwhite;

    .goods-list {
        display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
        margin-top: 47px;
        width: 100%;
        .goods-item {
            width: 48%;
            padding: 10px;
            margin-top: 10px;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid gainsboro;
            .image {
                width: 154px;
                height: 154px;
            }
            .name {
                height: 30px;
                font-size: 13px;
            
                overflow:hidden;
                text-overflow:ellipsis;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;
            }
            .price {
                margin-top: 8px;
                line-height: 1;
                color: #cf4444;
                font-size: 15px;
            }
            .symbol {
                font-size: 70%;
            }
            .decimal {
                font-size: 70%;
            }
        }
    }
    // 空状态
    .blank {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        .image {
            width: 200px;
            height: 141px;
        }
        .text {
            color: #444;
            font-size: 13px;
            margin: 10px 0;
        }
        .button {
            width: 120px !important;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            font-size: 13px;
            border-radius: 30px;
            color: #fff;
            background-color: #27ba9b;
        }
    }
}
</style>
